<!DOCTYPE html>
<html lang="en" xmlns:v-css="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>v-slot-learn，学习v-slot插槽-具名插槽</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
        <!-- https://www.jianshu.com/p/31674b727954 -->
    </head>
    <body>
        <div id="app">
            <div style="font-size: 20px; color: #ff70ad">默认插槽的例子</div>
            我的爱好：
            <myhobby v-bind:hobby="hobby"></myhobby>
            <hr/>
            <div style="font-size: 20px; color: #ff70ad">具名插槽的例子</div>
            <trip v-bind:message="message">
                <province slot="province" v-for="(item, key, index) in cities" :pname="key"></province>
                <city slot="city" v-for="x in sports" v-bind:cname="x"></city>
            </trip>
        </div>


        <script>
            Vue.config.devtools = true

            // 默认插槽
            Vue.component("myhobby", {
                props: ['hobby'],
                template: '<span><slot>{{hobby}}</slot></span>'
            });

            // 具名插槽，有名字的插槽
            Vue.component("trip", {
                props: ['message'],
                // 这个写起来还是没有.vue里面舒服，这边相当于是字符串的拼接，.vue是直接的HTML开发
                template: '<div> \
                            {{message}} \
                            <slot name="province"></slot> \
                            <ul><slot name="city"></slot></ul> \
                            </div>'
            });
            Vue.component("province", {
                props: ['pname'],
                template: '<p>{{pname}}</p>'
            });
            Vue.component("city", {
                props: ['cname'],
                template: '<li>{{cname}}</li>'
            });

            let vue001 = new Vue({
                el: "#app",
                data: {
                    hobby: "LOL",
                    sports: [
                        "篮球", "足球", "乒乓球", "手球"
                    ],
                    message: '去过的地方',
                    cities: {
                        "hunan": [
                            '长沙',
                            '桂阳'
                        ],
                        "hebei": [
                            '邯郸',
                            '秦皇岛',
                            '石家庄',
                            '保定'
                        ],
                        "hubei": [
                            '武汉',
                            '黄梅',
                            '荆门'
                        ],
                        "xinjiang": [
                            '乌鲁木齐',
                            '喀什',
                            '莎车'
                        ],
                        "guangdong": [
                            '广州'
                        ]
                    }
                },
                // 钩子函数，可以用于调试和在生命周期之中完成一些相应的功能
                mounted: function () {
                    console.log("123")
                }
            });
        </script>

    </body>
</html>